<template>
  <view class="container">
    <transition name="slide-fade">
      <view class="contact-container" v-if="showContent">
        <view class="qr-section">
          <image 
            class="qr-code" 
            src="https://via.placeholder.com/400"
            mode="aspectFit"
          />
          <text class="qr-tip">扫描二维码添加客服微信</text>
        </view>
        
        <view class="contact-info">
          <text class="info-title">工作时间</text>
          <text class="info-text">周一至周五 9:00-18:00</text>
          
          <text class="info-title">联系邮箱</text>
          <text class="info-text">yichen015@163.com</text>
        </view>
      </view>
    </transition>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showContent: false
    }
  },
  onLoad() {
    setTimeout(() => {
      this.showContent = true;
    }, 100);
  }
}
</script>

<style>
.container {
  min-height: 100vh;
  background-color: #f8f8f8;
}

/* 动画效果 */
.slide-fade-enter-active {
  transition: all 0.3s ease;
}

.slide-fade-enter-from {
  transform: translateY(50px);
  opacity: 0;
}

.contact-container {
  padding: 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  border-radius: 20rpx;
  margin: 20rpx;
}

.qr-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 60rpx;
}

.qr-code {
  width: 400rpx;
  height: 400rpx;
  margin-bottom: 20rpx;
}

.qr-tip {
  font-size: 28rpx;
  color: #666;
}

.contact-info {
  width: 100%;
}

.info-title {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 12rpx;
  margin-top: 32rpx;
}

.info-text {
  font-size: 28rpx;
  color: #666;
}
</style> 